<template>
  <div class="resource-distribution">
    <div class="divMap" style="height:6.2rem;background: #fff;  margin-bottom:0.2rem;" v-if="regionName=='锡林郭勒盟'">
      <iframe width="100%" height="100%"  src="http://58.18.173.195:8082/mengenergy-app/neimeng-app/storage/resourceDistribute-xlgl.html" frameborder="0"></iframe>
    </div>
    <div class="divMap" style="height:6.2rem;background: #fff;  margin-bottom:0.2rem;" v-else-if="regionName!='锡林郭勒盟'">
      <iframe width="100%" height="100%"  src="http://58.18.173.195:8082/mengenergy-app/neimeng-app/storage/resourceDistribute.html" frameborder="0"></iframe>
    </div>
    <div class="divpieWap itemDiv">
      <div class="pieTab">
        <span :class="{ activeSp: changeTpe1 == 1 }" @click="changeTpe1 = 1"
          >能源储量占比分析</span
        >
        <span :class="{ activeSp: changeTpe1 == 2 }" @click="changeTpe1 = 2"
          >各盟市资源排名</span
        >
      </div>
      <div v-show="changeTpe1 == 1" class="ecahrts" id="divPie"></div>
      <div v-show="changeTpe1 == 2" class="ecahrts" id="divBar"></div>
    </div>
    <div class="divLineWap itemDiv">
      <div class="lineTab">
        <span
          v-for="item of tabArr"
          :key="item.id"
          :class="{ activeSp: changeTpe2 == item.id }"
          @click="handleChangeTpe(item.id)"
          >{{ item.name }}</span
        >
      </div>
      <!-- 煤炭 -->
      <div v-show="changeTpe2==1">
        <div class="MDiv">
          <span class="sp1">煤炭</span>
          <div>
<!--            <span class="sp2">{{coalData.unitpeople}}</span>-->
            <img src="../assets/img/resourceDistribution/icon1.png" alt="" />
          </div>
        </div>
        <table class="tableWap">
          <thead>
            <tr class="tr1">
              <th>基础储量</th>
              <th>全国占比</th>
              <th>全国排名</th>
            </tr>
          </thead>
          <tr style="height: 0.1rem"></tr>
          <tr class="tr2">
            <td>
              <p class="tdP1">
                <span class="tdSp1">{{coalData.Total}}</span>
                <span class="tdSp2">亿吨</span>
              </p>
            </td>
            <td>
              <p class="tdP2">
                {{coalData.Rate}} <span class="tdSp2" style="padding: 0"></span>
              </p>
            </td>
            <td><p class="tdP2">{{coalData.Rank}}</p></td>
          </tr>
        </table>
      </div>
      <!-- 石油 -->
      <div v-show="changeTpe2==2">
        <div class="MDiv">
          <span class="sp1">石油</span>
          <div>
<!--            <span class="sp2">{{oilData.unitpeople}}</span>-->
            <img src="../assets/img/resourceDistribution/icon2.png" alt="" />
          </div>
        </div>
        <table class="tableWap">
          <thead>
            <tr class="tr1">
              <th>剩余技术可开采量</th>
              <th>储采比</th>
              <th>全国占比</th>
              <th>全国排名</th>
            </tr>
          </thead>
          <tr style="height: 0.1rem"></tr>
          <tr class="tr2">
            <td>
              <p class="tdP1">
                <span class="tdSp1">{{oilData.Total}}</span>
                <span class="tdSp2">亿吨</span>
              </p>
            </td>
            <td>
              <p class="tdP2">
                {{oilData.Ratio}} <span class="tdSp2" style="padding: 0">%</span>
              </p>
            </td>
            <td>
              <p class="tdP2">
                {{oilData.countryRate}} <span class="tdSp2" style="padding: 0"></span>
              </p>
            </td>
            <td><p class="tdP2">{{oilData.countryRank}}</p></td>
          </tr>
        </table>
      </div>
      <!-- 天然气 -->
      <div v-show="changeTpe2==3">
        <div class="MDiv">
          <span class="sp1">天然气</span>
          <div>
<!--            <span class="sp2">人均：3，8400立方米</span>-->
            <img src="../assets/img/resourceDistribution/icon3.png" alt="" />
          </div>
        </div>
        <table class="tableWap">
          <thead>
            <tr class="tr1">
              <th>剩余技术可开采量</th>
              <th>储采比</th>
              <th>全国占比</th>
              <th>全国排名</th>
            </tr>
          </thead>
          <tr style="height: 0.1rem"></tr>
          <tr class="tr2">
            <td>
              <p class="tdP1">
                <span class="tdSp1">{{gasData.Total}}</span>
                <span class="tdSp2">亿立方米</span>
              </p>
            </td>
            <td>
              <p class="tdP2">
                {{gasData.Ratio}} <span class="tdSp2" style="padding: 0">%</span>
              </p>
            </td>
            <td>
              <p class="tdP2">
                {{gasData.countryRate}} <span class="tdSp2" style="padding: 0"></span>
              </p>
            </td>
            <td><p class="tdP2">{{gasData.countryRank}}</p></td>
          </tr>
        </table>
      </div>
      <!-- 风能 -->
      <div v-show="changeTpe2==4">
        <div class="MDiv">
          <span class="sp1">风能</span>
          <div>
<!--            <span class="sp2">{{windData.unitpeople}}</span>-->
            <img src="../assets/img/resourceDistribution/icon4.png" alt="" />
          </div>
        </div>
        <table class="tableWap">
          <thead>
            <tr class="tr1">
              <th>技术可开发量</th>
              <th>全国占比</th>
              <th>全国排名</th>
            </tr>
          </thead>
          <tr style="height: 0.1rem"></tr>
          <tr class="tr2">
            <td>
              <p class="tdP1">
                <span class="tdSp1">{{windData.energyExploitTech}}</span>
                <span class="tdSp2">千瓦时</span>
              </p>
            </td>
            <td>
              <p class="tdP2">
                {{windData.rate}} <span class="tdSp2" style="padding: 0"></span>
              </p>
            </td>

            <td><p class="tdP2">{{windData.rank}}</p></td>
          </tr>
        </table>
      </div>
      <!-- 水能 -->
      <div v-show="changeTpe2==5">
        <div class="MDiv">
          <span class="sp1">水能</span>
          <div>
<!--            <span class="sp2">{{waterData.unitpeople}}</span>-->
            <img src="../assets/img/resourceDistribution/icon5.png" alt="" />
          </div>
        </div>
        <table class="tableWap">
          <thead>
            <tr class="tr1">
              <th>技术可开发量</th>
              <th>全国占比</th>
              <th>全国排名</th>
            </tr>
          </thead>
          <tr style="height: 0.1rem"></tr>
          <tr class="tr2">
            <td>
              <p class="tdP1">
                <span class="tdSp1">{{waterData.energyExploitTech}}</span>
                <span class="tdSp2">万千瓦</span>
              </p>
            </td>
            <td>
              <p class="tdP2">
                {{waterData.rate}} <span class="tdSp2" style="padding: 0"></span>
              </p>
            </td>

            <td><p class="tdP2">{{waterData.rank}}</p></td>
          </tr>
        </table>
      </div>
      <!-- 太阳能 -->
      <div v-show="changeTpe2==6">
        <div class="MDiv">
          <span class="sp1">太阳能</span>
          <div>
<!--            <span class="sp2">{{sunData.unitpeople}}</span>-->
            <img src="../assets/img/resourceDistribution/icon6.png" alt="" />
          </div>
        </div>
        <table class="tableWap">
          <thead>
            <tr class="tr1">
              <th>技术可开发量</th>
              <th>全国占比</th>
              <th>全国排名</th>
            </tr>
          </thead>
          <tr style="height: 0.1rem"></tr>
          <tr class="tr2">
            <td>
              <p class="tdP1">
                <span class="tdSp1">{{sunData.energyExploitTech}}</span>
                <span class="tdSp2">亿千瓦时</span>
              </p>
            </td>
            <td>
              <p class="tdP2">
                {{sunData.rate}} <span class="tdSp2" style="padding: 0"></span>
              </p>
            </td>

            <td><p class="tdP2">{{sunData.rank}}</p></td>
          </tr>
        </table>
      </div>

      <lineEcharts
        :echartId="EchartObj.echartId"
        :seriesData="EchartObj.seriesData"
        :otherOptions="EchartObj.otherOptions"
        :xAxisData="EchartObj.xAxisData"
        :echartColor="EchartObj.echartColor"
      />
    </div>
  </div>
</template>

<script>
    import lineEcharts from "../components/echartsComponents/line-echarts";

export default {
  data() {
    return {
      regionName:localStorage.getItem("regionName"),
        coalData:{

            Total:5897,
            Rate:13.8,
            Rank:22
        },
        oilData:{

            Total:7116,
            Ratio:18.4,
            countryRate:2.4,
            countryRank:11
        },
        gasData:{

            Total:9608,
            Ratio:31.3,
            countryRate:17.7,
            countryRank:3
        },
        windData:{

            energyExploitTech:14.6,
            rate:57.4,
            rank:1
        },
        waterData:{

            energyExploitTech:281,
            rate:0.4,
            rank:21
        },
        sunData:{

            energyExploitTech:7.5,
            rate:35.1,
            rank:2
        },
        changeTpe1: 1,
        changeTpe2: 1,
        tabArr: [
          { name: "煤炭", id: 1 },
          { name: "石油", id: 2 },
          { name: "天然气", id: 3 },
          { name: "风能", id: 4 },
          { name: "水能", id: 5 },
          { name: "太阳能", id: 6 },
        ],
        EchartObj: {
          echartId: "EchartsLine",
          echartColor: ["#4181FF"],
          // legendData: ["能源消费增长率", "能源生产增长率", "全区经济增长率"],
          seriesData: [
            {
              name: "煤炭",
              data: [13, 2, 2, 32, 123, 23, 136, 322, 45],
            },
          ],
          xAxisData: [
            "2011",
            "2012",
            "2013",
            "2014",
            "2015",
            "2016",
            "2017",
            "2018",
            "2019",
          ],
          otherOptions: {
            smooth: false,
            showSymbol: true,
            yName: "万吨",
          },
        },
        barData:{
              area: [
                  "阿拉善盟",
                  "巴彦淖尔盟",
                  "鄂尔多斯",
                  "包头市",
                  "呼和浩特",
                  "乌兰察布",
                  "锡林郭勒盟",
                  "呼伦贝尔市",
                  "赤峰市",
                  "兴安盟",
                  "通辽市",
              ],

              legend: ["天然气", "原油", "太阳能", "风能", "原煤", "其他"],
              data: [
                  [21, 34, 67, 86, 23, 23, 86, 89, 4, 78, 6],
                  [21, 34, 67, 86, 23, 23, 86, 89, 4, 78, 6],
                  [21, 34, 67, 86, 23, 23, 86, 89, 4, 78, 6],
                  [21, 34, 67, 86, 23, 23, 86, 89, 4, 78, 6],
                  [21, 34, 67, 86, 23, 23, 86, 89, 4, 78, 6],
                  [21, 34, 67, 86, 23, 23, 86, 89, 4, 78, 6],
                  [21, 34, 67, 86, 23, 23, 86, 89, 4, 78, 6],
                  [21, 34, 67, 86, 23, 23, 86, 89, 4, 78, 6],
                  [21, 34, 67, 86, 23, 23, 86, 89, 4, 78, 6],
              ],

          }
    };
  },
  components: {
    lineEcharts,
  },
  mounted() {
    this.getPieOption();
    this.getBarOption();
    this.handleChangeTpe(1);
  },
  methods: {
    getPieOption() {
      let option = {
        tooltip: {
          confine:true,
          trigger: "item",
          formatter: "{a} <br/>{b}: {c} ({d}%)",
        },
        legend: {
          orient: "horizontal",
          bottom: "1",
          // icon: 'path://M512 15.17037C238.933333 15.17037 15.17037 238.933333 15.17037 512s223.762963 496.82963 496.82963 496.82963 496.82963-223.762963 496.82963-496.82963S785.066667 15.17037 512 15.17037z m0 766.103704c-147.911111 0-269.274074-121.362963-269.274074-269.274074 0-147.911111 121.362963-269.274074 269.274074-269.274074s269.274074 121.362963 269.274074 269.274074c0 147.911111-121.362963 269.274074-269.274074 269.274074z',
          // data: [
          //   {
          //     name: "天然气",
          //   },
          //   {
          //     name: "原油",
          //   },
          //   {
          //     name: "太阳能",
          //   },
          //   {
          //     name: "风能",
          //   },
          //   {
          //     name: "原煤",
          //   },
          //   {
          //     name: "其他",
          //   },
          //
          // ],
          itemWidth: 20,
          itemHeight: 5,
          textStyle: {
            color: "#9C9EA2",
            fontSize: 10,
          },
        },
        grid: {
          bottom: "5%",
          top: "2%",
        },
        series: [
          {
            name: "能源储量占比",
            type: "pie",
            radius: ["40%", "60%"],
            center: ["50%", "50%"], // 设置饼图位置
            // avoidLabelOverlap: false,
            label: {
              normal: {
                formatter: "{d|{d}}{n|%}",
                rich: {
                  // b: {
                  //   fontSize: 12,
                  //   lineHeight: 33,
                  //   color: '#ccc'
                  // },
                  d: {
                    fontSize: 13,
                    color: "#9C9EA2",
                  },
                  n: {
                    fontSize: 13,
                    color: "#9C9EA2",
                  },
                },
                // show: false,
                // position: 'center'
              },
            },
            labelLine: {
              show: true,
              // length: 0,
              // length2: 50,
              lineStyle: {
                //   color: '#3e4364'
              },
            },
            data: [
              { value: 22, name: "天然气" },
              { value: 44, name: "原油" },
              { value: 23, name: "太阳能" },
              { value: 34, name: "风能" },
              { value: 34, name: "原煤" },
              { value: 34, name: "其他" },
              {
                label: {
                  normal: {
                    position: "center", // 让文字居中
                    show: true,
                    formatter: ["{c|}"].join("\n"),
                    rich: {
                      c: {
                        backgroundColor: {
                          image: require("../assets/img/pieImg.jpeg"),
                        },
                        height: 45,
                        width: 45,
                        top: "", // 让图片居中
                        left: "center",
                      },
                    },
                  },
                },
              },
            ],
          },
        ],
        color: [
          "#16DEA2",
          "#ED6046",
          "#6A96FE",
          "#EB32D0",
          "#FF8E10",
          "#5030FF",
        ],
      };
      var myChart = this.$echarts.init(document.getElementById("divPie"));
      this.$axios.post(`/mengenergy-background/oilgasstore/energyProportion`, {typeId:0}).then(res =>{
            if(res.code == 0){
             for(let i=0;i<option.series[0].data.length-1;i++){
               option.series[0].data[i].name = res.data.energyProportion[i].name;
               option.series[0].data[i].value = res.data.energyProportion[i].value
             }
                myChart.setOption(option);
            }
        })


    },
    getBarOption() {
      var colors = [
        "#16DEA2",
        "#ED6046",
        "#6A96FE",
        "#EB32D0",
        "#FF8E10",
        "#5030FF",
      ];
      var option = {
         tooltip: {
           confine:true,
           trigger: 'axis',
             axisPointer:{
               type :'shadow'
             },
           formatter: "{b} <br/>{a0}: {c0}<br/>{a1}: {c1}<br/>{a2}: {c2}<br/>{a3}: {c3}<br/>{a4}: {c4}<br/>{a5}: {c5}"

        },
        color: colors,
        legend: {
          // top: 10,
          // left: 200,
          itemWidth: 20,
          itemHeight: 5,
          // padding: [5, 10],
          textStyle: {
            fontSize: 10,
            color: "#96A4F4",
            // padding: [3, 0, 0, 0]
          },
          data: this.barData.legend,
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          top: "22%",
          containLabel: true,
        },
        xAxis: {
          type: "category",
          axisLabel: {
            color: "#8D939C",
            rotate: 50,
            fontSize: 10,
          },
          axisLine: {
            lineStyle: {
              color: "#96A4F4",
            },
            width: 5,
          },
          axisTick: {
            show: false,
          },
          data: this.barData.area,
        },
        yAxis: {
          name: "万吨标煤",
          nameTextStyle: {
            color: "#9C9DA2",
            fontSize: 10,
            padding: [0, 0, 0, "-20"],
          },
          type: "value",
          axisLabel: {
            color: "#8D939C",
            fontSize: 10,
          },
          axisLine: {
            lineStyle: {
              color: "#96A4F4",
            },
            width: 5,
          },
          axisTick: {
            show: false,
          },
          splitLine: {
            lineStyle: {
              color: "rgba(150, 164, 244, 0.3)",
            },
          },
        },
        series: [{
          name: '天然气',
          type: "bar",
          stack: "总量",
          barWidth: "45%",
          label: {
            show: false,
            position: "insideRight",
          },
          data: [20,33,23,15,23,25,14,23,23,22,11],
        },{
          name: '原油',
          type: "bar",
          stack: "总量",
          barWidth: "45%",
          label: {
            show: false,
            position: "insideRight",
          },
          data: [20,33,23,15,23,25,14,23,23,22,11],
        },{
          name: '太阳能',
          type: "bar",
          stack: "总量",
          barWidth: "45%",
          label: {
            show: false,
            position: "insideRight",
          },
          data: [20,33,23,15,23,25,14,23,23,22,11],
        },{
          name: '风能',
          type: "bar",
          stack: "总量",
          barWidth: "45%",
          label: {
            show: false,
            position: "insideRight",
          },
          data: [20,33,23,15,23,25,14,23,23,22,11],
        },{
          name: '原煤',
          type: "bar",
          stack: "总量",
          barWidth: "45%",
          label: {
            show: false,
            position: "insideRight",
          },
          data: [20,33,23,15,23,25,14,23,23,22,11],
        },{
          name: '其他',
          type: "bar",
          stack: "总量",
          barWidth: "45%",
          label: {
            show: false,
            position: "insideRight",
          },
          data: [20,33,23,15,23,25,14,23,23,22,11],
        }],
      };
      this.$axios.post(`/mengenergy-background/oilgasstore/cityResourceRank`, ).then(res =>{
            if(res.code == 0){
              option.xAxis.data = res.data.cityResourceRank.xAxisData;
              option.series[0].data = res.data.cityResourceRank.gas;
              option.series[1].data = res.data.cityResourceRank.oil;
              option.series[2].data = res.data.cityResourceRank.sun;
              option.series[3].data = res.data.cityResourceRank.wind;
              option.series[4].data = res.data.cityResourceRank.coal;
              option.series[5].data = res.data.cityResourceRank.other
                var myChart = this.$echarts.init(document.getElementById("divBar"));
                myChart.setOption(option);
            }
        })
    },
    handleChangeTpe(id){
      this.changeTpe2=id;
      if(id==4){
        this.EchartObj.otherOptions.gridLeft='15%'
      }else{
        this.EchartObj.otherOptions.gridLeft='10%'
      }
      switch(id){
        case 1:
            this.EchartObj.otherOptions.yName='万吨'
            this.$axios.post(`/mengenergy-background/oilgasstore/coal`,{typeId:0}).then(res =>{
                if(res.code == 0){
                  this.coalData.Total=res.body.coalTech;
                  this.coalData.Rate='--';
                  this.coalData.Rank='--';
                  this.EchartObj.xAxisData = res.body.coalTechByDate.xAxisData
                  this.EchartObj.seriesData[0].data = res.body.coalTechByDate.yAxisData

                }
            })
          break;
        case 2:
            this.EchartObj.otherOptions.yName='万吨'
          this.$axios.post(`/mengenergy-background/oilgasstore/oil`,{typeId:0}).then(res =>{
            if(res.code == 0){
              this.oilData.Total=res.body.oilTech;
              this.oilData.Ratio = res.body.oilRatio;
              this.oilData.countryRate='--';
              this.oilData.countryRank='--';
              this.EchartObj.xAxisData = res.body.oilTechByDate.xAxisData
              this.EchartObj.seriesData[0].data = res.body.oilTechByDate.yAxisData

            }
          })
          break;
        case 3:
            this.EchartObj.otherOptions.yName='亿立方米'
          this.$axios.post(`/mengenergy-background/oilgasstore/gas`,{typeId:0}).then(res =>{
            if(res.code == 0){
              this.gasData.Total=res.body.gasTech;
              this.gasData.Ratio = res.body.gasRatio;
              this.gasData.countryRate='--';
              this.gasData.countryRank='--';
              this.EchartObj.xAxisData = res.body.gasTechByDate.xAxisData
              this.EchartObj.seriesData[0].data = res.body.gasTechByDate.yAxisData

            }
          })
          break;
        case 4:
          this.EchartObj.otherOptions.yName='万千瓦'
          this.$axios.post(`/mengenergy-background/oilgasstore/wind`,{typeId:0}).then(res =>{
            if(res.code == 0){
              this.windData.energyExploitTech=res.body.windTech;
              this.windData.rate='--';
              this.windData.rank='--';
              this.EchartObj.xAxisData = res.body.windTechByDate.xAxisData
              this.EchartObj.seriesData[0].data = res.body.windTechByDate.yAxisData

            }
          })
          break;
        case 5:
            this.EchartObj.otherOptions.yName='万千瓦'
          this.$axios.post(`/mengenergy-background/oilgasstore/water`,{typeId:0}).then(res =>{
            if(res.code == 0){
              this.waterData.energyExploitTech=res.body.waterTech;
              this.waterData.rate='--';
              this.waterData.rank='--';
              this.EchartObj.xAxisData = res.body.waterTechByDate.xAxisData
              this.EchartObj.seriesData[0].data = res.body.waterTechByDate.yAxisData

            }
          })
          break;
        case 6:
          this.EchartObj.otherOptions.yName='亿千瓦时';
          this.$axios.post(`/mengenergy-background/oilgasstore/sun`,{typeId:0}).then(res =>{
            if(res.code == 0){
              this.sunData.energyExploitTech=res.body.sunTech;
              this.sunData.rate='--';
              this.sunData.rank='--';
              this.EchartObj.xAxisData = res.body.sunTechByDate.xAxisData
              this.EchartObj.seriesData[0].data = res.body.sunTechByDate.yAxisData

            }
          })
          break;
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.resource-distribution {
  font-size: 0.24rem;

  background-color: #dcdcdc;
  .divMap {
    height: 4rem;
  }
  .ecahrts {
    width: 7.12rem;
    height: 4rem;
  }
  .itemDiv {
    // width: 95%;
    padding: 0.2rem 2.5%;
    margin: 0 auto;
    background-color: #fff;
    margin-bottom: 0.2rem;
  }
  .pieTab {
    display: flex;
    border: 1px solid #246cd6;
    margin-bottom: 0.2rem;
    span {
      flex: 1;
      text-align: center;
      color: #246cd6;
      font-size: 0.24rem;
      line-height: 0.52rem;
    }
  }

  .lineTab {
    display: flex;
    border: 1px solid #246cd6;
    border-right: none;
    span {
      flex: 1;
      text-align: center;
      color: #246cd6;
      font-size: 0.24rem;
      line-height: 0.52rem;
      border-right: 1px solid #246cd6;
    }
  }
  .divpieWap .activeSp,
  .divLineWap .activeSp {
    color: #fff;
    background-color: #246cd6;
  }
  .MDiv {
    display: flex;
    justify-content: space-between;
    padding: 0.44rem 0.3rem;
    .sp1 {
      color: #15203a;
      font-size: 0.28rem;
      font-weight: bold;
    }
    .sp2 {
      color: #636c82;
      font-size: 0.22rem;
      padding-right: 0.1rem;
    }
    img {
      width: 0.42rem;
      height: 0.33rem;
      vertical-align: middle;
      margin-top: -0.12rem;
    }
  }
  .tableWap {
    width: 100%;
    .tr1 {
      line-height: 0.4rem;
      background: rgba(171, 188, 213, .4);
      font-size: 0.22rem;
      color:#8A97AD;
      th:nth-child(1) {
        width: 45%;
      }
    }
    .tr2 {
      text-align: center;
      font-family: "经典综艺体简";

      td {
        font-size: 0.38rem;
      }
      td:nth-child(1) {
        text-align: center;

        // height: 0.56rem;
        // line-height: 0.56rem;
      }
    }
    .tdSp1 {
      font-size: 0.38rem;

      font-weight: 400;
    }
    .tdSp2 {
      font-size: 0.23rem;
      color: #8c96af;
      padding-left: 0.05rem;
    }
    .tdP1 {
      // width: 98%;s
      background-color: rgba(0, 103, 255, 0.2);
      margin-left: 2px;
      height: 0.6rem;
      line-height: 0.6rem;
    }
    .tdP2 {
      width: 98%;
      background: rgba(171, 188, 213, 0.1);
      margin-left: 2px;
      height: 0.6rem;
      line-height: 0.6rem;
    }
  }
}
</style>
